<template>
  <div class="chart-container">
    <v-chart class="chart" :option="chartOption" autoresize />
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart, LineChart } from "echarts/charts";
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  DataZoomComponent,
} from "echarts/components";
import VChart from "vue-echarts";

// 注册必要的ECharts组件
use([
  CanvasRenderer,
  BarChart,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  DataZoomComponent,
]);

// 定义组件属性
const props = defineProps({
  barData: {
    type: Array,
    default: () => [150, 130, 145, 135, 160, 180, 190, 210, 230, 245, 255, 270],
  },
  lineData: {
    type: Array,
    default: () => [
      6.5, 5.2, 8.3, 7.1, 9.5, 12.3, 14.8, 16.5, 18.2, 20.1, 21.5, 23.2,
    ],
  },
  categories: {
    type: Array,
    //1-30
    default: () => [
      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
      22, 23, 24, 25, 26, 27, 28, 29, 30,
    ],
  },
  barName: {
    type: String,
    default: "培训时长",
  },
  lineName: {
    type: String,
    default: "人流量",
  },
  barColor: {
    type: String,
    default: "#1CDAFB",
  },
  lineColor: {
    type: String,
    default: "#C9B217",
  },
  showDataZoom: {
    type: Boolean,
    default: true,
  },
});

// 计算图表配置
const chartOption = computed(() => {
  return {
    backgroundColor: "#021b58",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
      backgroundColor: "rgba(255, 255, 255, 0.9)",
      borderColor: "#ccc",
      textStyle: {
        color: "#333",
      },
    },
    legend: {
      data: [
        {
          // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
          name: props.barName,
          icon: "rect",
        },
        {
          name: props.lineName,
          icon: "rect",
        },
      ],
      color: "#fff",

      itemWidth: 12,
      itemHeight: 2,
      textStyle: {
        color: "#fff",
      },
      right: 100,
      top: 0,
    },
    grid: {
      left: "4%",
      right: "4%",
      bottom: props.showDataZoom ? "15%" : "10%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: props.categories,
      axisPointer: {
        type: "shadow",
      },
      axisLine: {
        lineStyle: {
          color: "#666",
        },
      },
    },
    yAxis: [
      {
        type: "value",
        name: "单位：小时",
        min: 0,
        axisLabel: {
          formatter: "{value}",
        },
        nameTextStyle: {
          lineHeight: 48,
          color: "#fff",
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: "dashed",
          },
        },
      },
      {
        type: "value",
        name: "单位：人",
        nameTextStyle: {
          lineHeight: 48,
          color: "#fff",
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: props.barName,
        type: "bar",
        barWidth: "40%",
        itemStyle: {
          color: props.barColor,
        },
        data: props.barData,
      },
      {
        name: props.lineName,
        type: "line",
        yAxisIndex: 1,
        symbol: "circle",
        symbolSize: 8,
        itemStyle: {
          color: props.lineColor,
        },
        lineStyle: {
          width: 3,
        },
        data: props.lineData,
      },
    ],
  };
});

</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 294px;
  padding: 20px;
  box-sizing: border-box;
}

.chart {
  width: 100%;
  height: 100%;
}

h2 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  text-align: center;
}
</style>
